<script>
import domUtil from 'wind-dom'

export default {
  name: 'SortBar',

  data() {
    return {
      items: {
        onlineTime: {
          name: '新品',
          desc: true
        },
        currentOffer: {
          name: '价格',
          desc: true
        }
      }
    }
  },

  methods: {
    changeSort(key, e) {
      let parent = e.currentTarget.parentElement
      if (!domUtil.hasClass(parent, 'active')) {
        // remove previous active class
        let activeSort = this.$el.querySelector('.sort-bar .active')
        if (activeSort) {
          domUtil.removeClass(activeSort, 'active')
        }

        // add active class
        domUtil.addClass(parent, 'active')
      }

      this.items[key].desc = !this.items[key].desc
      this.$emit('sortbar-change', key, this.items[key].desc)
    }
  }
}
</script>

<template>
<ul class="sort-bar">
  <li class="sort-title">排序：</li>
  <li v-for="(item, key) in items" :class="">
    <a href="javascript: void(0)" class="sort-item" @click="changeSort(key, $event)">
      {{ item.name }}&nbsp;&nbsp;<i :class="'fa fa-arrow-' + (item.desc ? 'down' : 'up')"></i>
    </a>
  </li>
</ul>
</template>

<style>
.sort-bar > li {
  float: left;
}

.sort-bar .sort-title {
  margin: 0;
  padding: 10px 0;
  color: #333;
}

.sort-bar .sort-item {
  display: block;
  padding: 10px;
  margin: 0 10px;
  color: #777;
}

.sort-bar .sort-item:hover,
.sort-bar > .active > .sort-item {
  text-decoration: none;
  color: #000;
}

.sort-bar > .active .fa {
  color: #f66e6d;
}
</style>